<template>
    <div>
        <h1>国际化方案</h1>

        <div>用于记录不同平台和语言实现的多语言方案</div>
        <h3>Uniapp-vue2</h3>
        <dCode :code="conf.uniappVue2" />
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const conf = reactive({
    uniappVue2: `\\import Vue from 'vue'
\\import {
	// #ifdef H5
	HttpBean,
	// #endif
	ObjectUtil
} from 'tools-uniapp'
// #ifndef H5
\\import cn from '@/static/lang/cn.json'
\\import en from '@/static/lang/en.json'
// #endif

export const t = Vue.observable({
	data: {},
	theme: 'en',
	init: async () => {
		// #ifndef H5
		t.data = {
			cn,
			en
		}
		// #endif
		Vue.prototype['$t'] = (name, isValue = false) => {
			const getVal = () => ObjectUtil.getPathValue(t.data[t.theme], name) || ''
			if (isValue) return getVal
			return getVal()
		}
		Vue.prototype['t'] = t
		await t.setLang(t.theme)
	},
	// #ifdef H5
	http: HttpBean(),
	// #endif
	setLang: async (name) => {
		// #ifdef H5
		if (!t.data[name]) {
			uni.showLoading({
				mask: true,
			})
			const res = await t.http.get(\`/static/lang/\${name}.json\`)
			t.data[name] = res
			uni.hideLoading()
		}
		// #endif
		t.theme = name
	},
})`,
})

</script>
<style lang="less" scoped></style>
